<template>
  <div>
    <div style="display: flex; justify-content: space-between">
      <el-button type="primary" @click="add">+ 新增</el-button>
      <div>
        <el-input
          placeholder="请输入"
          v-model="input1"
          clearable
          style="width: 180px; margin-right: 10px"
          @clear="getUser1"
          @keydown.enter.native="search"
        >
        </el-input>
        <el-button type="primary" @click="search">搜索</el-button>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
      <el-form
        :model="numberValidateForm"
        ref="numberValidateForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div style="display: flex; flex-wrap: wrap" class="dialog0">
          <div class="dialog1">
            <el-form-item
              label="姓名"
              prop="name"
              :rules="[{ required: true, message: '姓名不能为空' }]"
            >
              <el-input
                v-model.number="numberValidateForm.name"
                placeholder="请输入姓名"
                class="dialog"
              ></el-input>
            </el-form-item>
          </div>
          <div class="dialog1">
            <el-form-item
              label="年龄"
              prop="age"
              :rules="[
                { required: true, message: '年龄不能为空' },
                { type: 'number', message: '年龄必须为数字值' },
              ]"
            >
              <el-input
                v-model.number="numberValidateForm.age"
                placeholder="请输入年龄"
                class="dialog"
              ></el-input>
            </el-form-item>
          </div>
          <div class="dialog1">
            <el-form-item
              label="性别"
              prop="sex"
              :rules="[{ required: true, message: '性别不能为空' }]"
            >
              <el-select
                v-model="numberValidateForm.sex"
                placeholder="请选择"
                class="dialog"
              >
                <el-option
                  v-for="item in options"
                  :key="item.sex"
                  :label="item.label"
                  :value="item.sex"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="dialog1">
            <el-form-item
              label="日期"
              prop="birth"
              :rules="[{ required: true, message: '选择日期' }]"
            >
              <el-date-picker
                v-model="numberValidateForm.birth"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                class="dialog"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="dialog1">
            <el-form-item
              label="地址"
              prop="addr"
              :rules="[{ required: true, message: '地址不能为空' }]"
            >
              <el-input
                v-model="numberValidateForm.addr"
                placeholder="请输入地址"
                class="dialog"
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="determin">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 表格 -->
    <el-table :data="tableData" :stripe="true" height="490px">
      <el-table-column
        v-for="(item, index) in table"
        :prop="index"
        :label="item"
        :key="index"
        width="200"
      >
      </el-table-column>
      <el-table-column width="200" prop="" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="edit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="dele(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
    layout="prev, pager, next"
    :total="total"
    :page-size="pageSize"
    @current-change="CurrentPages"
     >
  </el-pagination>
  </div>
</template>
  <script>
import { getUser } from "../api";
export default {
    name: "MyUser",
    data() {
        return {
            index_bj: "",
            title: "",
            input1: "",
            a: "",
            numberValidateForm: {
                age: "",
                addr: "",
                birth: "",
                name: "",
                sex: "",
            },
            dialogVisible: false,
            options: [
                {
                    sex: "男",
                    lable: "男",
                },
                {
                    sex: "女",
                    lable: "女",
                },
            ],
            tabledatatatol:[],
            tableData: [],
            search_table: [],
            table: {
                name: "姓名",
                age: "年龄",
                sex: "性别",
                birth: "出生日期",
                addr: "地址",
            },
            total:0,
            pageSize:8
        };
    },
    methods: {
        add() {
            this.dialogVisible = true;
            this.title = "新增用户";
        },
        dele(index) {
            this.tableData.splice(index, 1);
        },
        determin() {
            if (this.title == "编辑用户") {
                if (this.numberValidateForm.name != "" &&
                    this.numberValidateForm.age != "" &&
                    this.numberValidateForm.addr != "" &&
                    this.numberValidateForm.birth != "" &&
                    this.numberValidateForm.sex != "") {
                    for (let key in this.tableData[this.index_bj]) {
                        this.tableData[this.index_bj][key] = this.numberValidateForm[key];
                    }
                    alert("编辑成功");
                    this.dialogVisible = false;
                    this.$refs.numberValidateForm.resetFields();
                    console.log(this.search_table);
                }
                else {
                    alert("信息不能为空");
                }
            }
            else {
                if (this.numberValidateForm.name != "" &&
                    this.numberValidateForm.age != "" &&
                    this.numberValidateForm.addr != "" &&
                    this.numberValidateForm.birth != "" &&
                    this.numberValidateForm.sex != "") {
                    let index = 0;
                    console.log(this.numberValidateForm.birth )
                    this.tableData.forEach((item) => {
                        if (this.numberValidateForm.name == item.name &&
                            this.numberValidateForm.age == item.age &&
                            this.numberValidateForm.addr == item.addr &&
                            this.numberValidateForm.birth == item.birth &&
                            this.numberValidateForm.sex == item.sex) {
                            index = -1;
                        }
                    });
                    if (index == -1) {
                        alert("信息已存在");
                    }
                    else {
                        this.tableData.unshift({ ...this.numberValidateForm });
                        this.dialogVisible = false;
                        this.$refs.numberValidateForm.resetFields();
                    }
                }
                else
                    alert("请填写完整信息");
            }
        },
        edit(index, items) {
            this.title = "编辑用户";
            this.dialogVisible = true;
            for (let key in this.numberValidateForm) {
                this.numberValidateForm[key] = items[key];
            }
            this.index_bj = index;
        },
        quxiao() {
            this.dialogVisible = false,
                this.$refs.numberValidateForm.resetFields();
        },
        search() {
            if (this.a == "") {
                this.search_table = [...this.tableData];
            }
            console.log( this.search_table)
            this.a = 1;
            this.tableData = this.search_table.filter(item => {
                for (let key in item) {
                  let b=item[key]
                  if(!(typeof item[key]=='string')&&key!='id')
                  {
                    b=item[key].toString()
                  }
                    if (key!='id'&&b.includes(this.input1)) {
                        return item;
                    }
                }
                return false
            });
        },
        getUser1() {
            this.tableData = [...this.search_table];
           
        },
        CurrentPages(pager){
          this.tableData=this.tabledatatatol.slice((pager-1)*this.pageSize,pager*this.pageSize)
          this.a=""
          console.log(this.tableData)
        }
    },
    mounted() {
      if(this.tabledatatatol.length==0)
      {
        getUser().then(({ data }) => {
          console.log(data)
            data.list.forEach((item) => {
                if (item.sex == 1) {
                    item.sex = "男";
                }
                else
                    item.sex = "女";
                    this.tabledatatatol.push(item)
                     this.total=this.tabledatatatol.length-1
                   this.tableData=this.tabledatatatol.slice(0,this.pageSize);
            });
        })}
    },
};
</script>
  
 <style lang="css" scoped>
.dialog {
  width: 180px;
  margin-left: 15px;
}
.dialog1 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 30px;
  margin-bottom: 30px;
}
::v-deep .el-pager li{
  width:140px;
}
</style>